<script setup lang="ts">
import {useDictSonViewStore} from "@/store/views/sys/admin/dictSonStore";
import {storeToRefs} from "pinia";
import {commonFormat} from "@/utils/format-table";
import {Perm, Role} from "@/utils/enum-type";

const store = useDictSonViewStore()
const {openEdit, openAdd, getList, openDelete} = store

const {queryData, total, tableData, currentDict, statusOptions} = storeToRefs(store)

async function sortTable({prop, order}: {
  prop: string,
  order: 'descending' | 'ascending' | null
}) {
  if (order === 'descending' || !order) {
    queryData.value.order = {key: prop, value: 'desc'}
  } else {
    queryData.value.order = {key: prop, value: 'asc'}
  }
  await getList()
}

watch([() => queryData.value.pageSize, () => queryData.value.currentPage], async () => {
  await getList()
})
// 载入查询
onMounted(async () => {
  await getList()
})
</script>

<template>
  <!-- 表格 -->
  <x-card>
    <!--    新增按钮-->
    <el-button  v-perm="Perm.SysDictSonAdd" type="success" @click="openAdd()">
      <i-ep-plus/>
      <span>新增子字典</span>
    </el-button>
    <el-text class="px-4!">
      当前名称:
      <el-text type="primary" size="large" class="px-4!">{{ currentDict.name }}</el-text>
    </el-text>
    <el-divider/>
    <el-table :data="tableData" style="width: 100%" show-overflow-tooltip @sort-change="sortTable">
      <el-table-column fixed prop="name" sortable="custom" label="名称" min-width="100"/>
      <el-table-column prop="code" sortable="custom" label="编码" min-width="120"/>
      <el-table-column prop="status" sortable="custom" label="状态" min-width="80">
        <template #default="{row}">
          <x-tag :value="row.status" :options="statusOptions"/>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" min-width="80" sortable="custom"/>
      <el-table-column  v-perm="[[Perm.SysDictSonEdit],[Perm.SysDictSonDelete]]" fixed="right"
                       label="操作" min-width="150" :show-overflow-tooltip="false">
        <template #default="{row}">
          <el-button v-perm="Perm.SysDictSonEdit" link type="primary" size="small" @click="openEdit(row.id)">
            <i-ep-edit/>
            <span>编辑</span>
          </el-button>
          <el-button v-perm="Perm.SysDictSonDelete" link type="danger" size="small" @click="openDelete(row.id)">
            <i-ep-delete/>
            <span>删除</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </x-card>
  <!--  分页-->
  <x-card body-style="padding:0.75em;padding-right:2em">
    <XPagination
        v-model:page-size="queryData.pageSize"
        v-model:current-page="queryData.currentPage"
        v-model:total="total"
    />
  </x-card>
</template>